<template>
  <a-modal
    :width="1000"
    :visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title> Title </template>
    <div
      ><tableTurn
        style="margin-top: 10px"
        :table-data="getProduct"
        ref="tableRef"
        :pagination="false"
        :args="args"
      >
        <a-table-column :width="100" align="center">
          <template #title> 序号 </template>
          <template #cell="{ rowIndex }">
            <div style="position: relative">
              <div>{{ rowIndex + 1 }}</div>
            </div>
          </template>
        </a-table-column>
        <a-table-column
          align="center"
          :width="100"
          title="储存数量"
          data-index="amount"
        >
        </a-table-column>
        <a-table-column
          align="center"
          :width="100"
          title="物料名称"
          data-index="productName"
        >
        </a-table-column>

        <a-table-column
          align="center"
          :width="100"
          title="规格型号"
          data-index="spec"
        >
        </a-table-column>
        <a-table-column
          align="center"
          title="基本单位"
          data-index="amount"
          :width="100"
        >
        </a-table-column>

        <a-table-column
          align="center"
          :width="100"
          title="订单数量"
          data-index="totalAmount"
        >
        </a-table-column>
        <a-table-column
          align="center"
          :width="100"
          title="已来料数量"
          data-index="amount"
        >
        </a-table-column>
        <a-table-column
          align="center"
          :width="100"
          title="已来料数量"
          data-index="amount"
        >
        </a-table-column>
      </tableTurn>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, computed, ref, watchEffect, nextTick } from 'vue';
  import { GetRouters } from '@/api/menu';
  import { getWarehouseGroundingGetone } from '@/api/inventory-management/warehousing-management/purchase-receipt/index';
  import { cloneDeep } from 'lodash';
  // import { cloneDeep } f rom 'lodash';

  const tableRef = ref();
  const props = withDefaults(
    defineProps<{
      tableId: any;
      visible: boolean;
    }>(),
    {
      visible: false,
    }
  );
  const emit = defineEmits(['update:visible']);

  const tableData = ref();
  const getData = async (id: any) => {
    const res = await getWarehouseGroundingGetone({ id });
    tableData.value = res;
    tableRef.value.loadData();
  };

  const getProduct = () => {
    try {
      const data = cloneDeep(tableData.value);
      return Promise.resolve(data);
    } catch (err: unknown) {
      console.log(err);
    }
  };

  // 判断用户是否显示弹出框
  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  // 取消
  const handleCancel = () => {
    modalVisible.value = false;
  };

  watchEffect(() => {
    if (modalVisible.value) {
      getData(Number(props.tableId));
    }
  });
</script>

<style scoped lang="less">
  .demo-basic {
    margin-top: 5px;
    width: 500px;
    // margin: auto;
    background-color: aliceblue;
  }
</style>
